<!--
  @author:  long
  @date:    2023/3/2
  @file:    客户列表
  @require:
-->
<template>
  <div class="commercialLoan app-container">
    <!-- 客户列表主体 start -->
    <div class="">
      <el-form :model="queryForm" ref="queryFormRef" class="demo-form-inline">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-form-item>
              <el-tree-select
                style="width: 100%"
                v-model="queryForm.orgId"
                :data="companyOptions"
                :disabled="userStore.user.orgId != '484'"
                clearable
                :props="{
                  value: 'id',
                  label: 'label',
                  children: 'children'
                }"
                placeholder="所属公司"
                value-key="id"
                filterable
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item>
              <el-date-picker
                style="width: 100%"
                v-model="updateTime"
                type="daterange"
                start-placeholder="更新时间起"
                end-placeholder="更新时间止"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-button type="primary" icon="Search" @click="handleQuery"
              >查询
            </el-button>
            <el-button icon="Upload" type="primary" plain @click="exportQuery"
              >导出
            </el-button>
          </el-col>
        </el-row>
      </el-form>

      <!--   列表显示start   -->
      <el-table
        ref="tableRef"
        :data="tableData"
        border
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column align="center" label="序号" type="index" width="55" />
        <el-table-column
          label="分公司"
          align="center"
          prop="deptName"
        ></el-table-column>
        <el-table-column
          label="操作人"
          prop="nickName"
          align="center"
        ></el-table-column>
        <el-table-column label="数量" align="center" prop="counts">
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryForm.pageNum"
        v-model:limit="queryForm.pageSize"
        @pagination="getList"
      />
      <!--   列表显示end   -->
    </div>
  </div>
</template>

<script setup name="CustomerUpdateStatistics">
import { getCurrentInstance, toRaw } from 'vue'

import { treeselect } from '@/api/rsgl/zzjg'
import useUserStore from '@/store/modules/user'

import useCommonStore from '@/store/modules/common'
import { getCustomerUpdateList } from '@/api/statistical/customerUpdateStatistics'

// 通用数据store
const commonStore = useCommonStore()

const userStore = useUserStore()

const { proxy } = getCurrentInstance()
const loading = ref(false)
const data = reactive({
  queryForm: {
    pageNum: 1,
    pageSize: 10,
    orgId: userStore.user.orgId != 484 ? userStore.user.orgId : 484
  },
  total: 0,
  tableData: [],
  updateTime: [] //更新时间
})
const { updateTime, queryForm, tableData, total } = toRefs(data)

const companyOptions = ref([])

/**
 * 金融商贷导出
 */
const exportQuery = () => {
  let params = JSON.parse(JSON.stringify(queryForm.value))
  //   放款时间
  if (updateTime.value != null && updateTime.value.length > 0) {
    params.updateTimeStart = updateTime.value[0] + ' 00:00:00'
    params.updateTimeEnd = updateTime.value[1] + ' 23:59:59'
  } else {
    params.updateTimeStart = undefined
    params.updateTimeEnd = undefined
  }

  proxy.downLoadByUrl(
    '/customer/bizcustomer/statisticsOutPutExcel',
    params,
    '客户更新记录统计.xlsx'
  )
}

/**
 * 获取归属公司数据
 * @returns {Promise<void>}
 */
async function getCompany() {
  let params = { deptType: 1 }

  // 所属单位列表
  let response = await treeselect(params)
  companyOptions.value = response.data
}

/**
 * 获取客户更新记录统计列表
 */
function getList() {
  loading.value = true
  let params = JSON.parse(JSON.stringify(queryForm.value))
  //   放款时间
  if (updateTime.value != null && updateTime.value.length > 0) {
    params.updateTimeStart = updateTime.value[0] + ' 00:00:00'
    params.updateTimeEnd = updateTime.value[1] + ' 23:59:59'
  } else {
    params.updateTimeStart = undefined
    params.updateTimeEnd = undefined
  }

  getCustomerUpdateList(params)
    .then(res => {
      if (res.data != null) {
        tableData.value = res.data.records
        total.value = res.data.total
      } else {
        tableData.value = []
        total.value = 0
      }
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 查询
 */
function handleQuery() {
  queryForm.value.pageNum = 1
  getList()
}

/**
 * 初始化
 */
function init() {
  // 获取归属公司数据
  getCompany()

  proxy.$nextTick(() => {
    //申贷列表
    getList()
  })
}
// 初始化
init()
</script>

<style scoped lang="scss"></style>
